<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%
String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + request.getContextPath() + "/";
%>
<!DOCTYPE html>
<html>
<head>
	<base href="<%=basePath%>">
<meta charset="UTF-8">

<link href="jquery/bootstrap_3.3.0/css/bootstrap.min.css" type="text/css" rel="stylesheet" />
<link href="jquery/bootstrap-datetimepicker-master/css/bootstrap-datetimepicker.min.css" type="text/css" rel="stylesheet" />

<script type="text/javascript" src="jquery/jquery-1.11.1-min.js"></script>
<script type="text/javascript" src="jquery/bootstrap_3.3.0/js/bootstrap.min.js"></script>
<script type="text/javascript" src="jquery/bootstrap-datetimepicker-master/js/bootstrap-datetimepicker.js"></script>
<script type="text/javascript" src="jquery/bootstrap-datetimepicker-master/locale/bootstrap-datetimepicker.zh-CN.js"></script>

	<link rel="stylesheet" type="text/css" href="jquery/bs_pagination/jquery.bs_pagination.min.css">
	<script type="text/javascript" src="jquery/bs_pagination/jquery.bs_pagination.min.js"></script>
	<script type="text/javascript" src="jquery/bs_pagination/en.js"></script>

	<script type="text/javascript">

	$(function(){
		//为创建按钮绑定事件，打开添加操作的模态窗口
		$("#addBtn").click(function (){
			//加入日期显示的插件（根据样式属性）
			$(".time").datetimepicker({
				minView: "month",
				language:  'zh-CN',
				format: 'yyyy-mm-dd',
				autoclose: true,
				todayBtn: true,
				pickerPosition: "bottom-left"
			});
			/*
			操作模特窗口的方式：
				获取到模态窗口的jquery对象，调用modal方法，参数为show表示打开，为hide表示隐藏
			 */
			//alert("123")


			//在打开模态窗口之前进行信息查询，查询出所有者，并将数据填入到数据中
			$.ajax({
				url : "workbench/activity/getUserList.do",

				type : "get",
				dataType : "json",
				success : function (data) {
					//定义字符串进行拼接
					var html = "<option></option>"
					//返回的数据应该是一个user的json格式得数组
					//遍历数组，用each语法
					$.each(data,function (index,element){
						html += "<option value='"+ element.id+"'>"+element.name+"</option>"


					})
					//为所有者填值
					$("#create-Owner").html(html);

					//设置所有者的默认值
					//使用El表达式,El表达式用在js中，要家双引号
					var id = "${user.id}";

					$("#create-Owner").val(id);

					//打开模态窗口
					$("#createActivityModal").modal("show");
				}

			})


		})

		//为保存按钮添加鼠标单击事件，添加市场活动
		$("#saveBtn").click(function (){

			$.ajax({
				url : "workbench/activity/save.do",
				data : {
					"owner" : $.trim($("#create-Owner").val()),
					"name" : $.trim($("#create-name").val()),
					"startDate" : $.trim($("#create-startDate").val()),
					"endDate" : $.trim($("#create-endDate").val()),
					"cost" : $.trim($("#create-cost").val()),
					"description" : $.trim($("#create-description").val())

				},
				type : "post",
				dataType : "json",
				success : function (data) {
					//返回成功或者失败，true表示成功，false表示失败
					if (data.success == true){
						//关闭模态窗口之前刷新页面
						/*
							jquery中的reset()方法无效，是个坑，使用js中的reset()方法

							jquery对象转为dom对象
								jquery对象[0]
							dom对象转为jquery对象
								$(dom对象)
						 */
						//重置表单
						$("#activityAddForm")[0].reset()

						//添加成功后刷新市场活动信息列表，局部刷新
						/*
							控制页数的方法
								第一个参数：保持当前页
								第二个参数：保持用户设定的每页展示多少条数

							pageList($("#activityPage").bs_pagination('getOption', 'currentPage')
							,$("#activityPage").bs_pagination('getOption', 'rowsPerPage'));



						*/
						//添加操作，添加完成后回到第一页，每页条数维系设定的
						pageList(1
								,$("#activityPage").bs_pagination('getOption', 'rowsPerPage'));

						//关闭添加操作的模态窗口
						$("#createActivityModal").modal("hide");
					}else {
						alert("保存失败")
					}
				}

			})
		})

		//局部刷新市场活动
		/*
			当点击市场活动超链接时，要刷新
			当点击创建，修改，删除，要刷新
			当点击页数的时候要刷新
			当点击查询的时候要刷新

			pageNo和pageSize代表页数和记录数
		 */
		//点击市场活动超链接时
		pageList(1,2);

		//当点击查询时，触发pageList方法
		$("#searchBtn").click(function (){


			//当点击查询按钮时，应该将搜索框中的数据保存起来，保存到隐藏域中
			$("#hidden-name").val($.trim($("#search-name").val()));
			$("#hidden-owner").val($.trim($("#search-owner").val()));
			$("#hidden-startDate").val($.trim($("#search-startDate").val()));
			$("#hidden-endDate").val($.trim($("#search-endDate").val()));

			//刷新页面，回到第一页，每页条数维持设定的
			pageList(1
					,$("#activityPage").bs_pagination('getOption', 'rowsPerPage'));
		})


		//选中和全选,为复选框触发全选操作
		$("#qx").click(function (){
			$("input[name=xz]").prop("checked",this.checked);
		})

		/*
		$("input[name=xz]").click(function (){
			$("#qx").attr("checked",true);
		})
		动态生成的元素，不能以绑定事件的方式进行操作
		要使用on的形式来触发事件

		语法：
			$(需要绑定元素的有效外层元素).on(绑定事件的方式，需要绑定事件元素的juqery对象，回调函数)

		*/


		$("#activityBody").on("click",$("input[name=xz]"),function (){
			$("#qx").prop("checked",$("input[name=xz]").length == $("input[name=xz]:checked").length);
		})


		//删除操作，为删除绑定鼠标单击事件
		$("#deleteBtn").click(function (){
			//获取到所有选中的复选框
			var $xz = $("input[name=xz]:checked");

			//如果为0，提示用户选中要删除的记录
			if ($xz.length==0){
				alert("请选择要删除的记录");
			}else{

				if (confirm("确定删除所选内容吗？")){

					//如果选中了,遍历出每一个复选框的id
					//因为要想后台发出请求，所有的参数key都是id，所以不能用json格式的参数，要使用普通请求，将参数进行拼接
					//id=b663299f087142c0baca846275f57b04&id=3ea0b1bbc5cf41c48e84ffb8d949daa0
					//url:
					var param ="";
					//遍历jquery对象，取出每一个dom对象，value值就是要删除的id值
					for (var i = 0;i < $xz.length; i++){
						param += "id="+$($xz[i]).val();
						//如果不是最后一个元素要在后面追加一个&
						if (i < $xz.length-1){
							param += "&";
						}
					}
					//alert(param);

					//向后台发出请求
					$.ajax({
						url : "workbench/activity/delete.do",
						data : param,
						type : "post",
						dataType : "json",
						success : function (data) {
							/*

                                data:
                                    {"success":true/false}
                            */

							//从前端返回成功或者失败
							if (data.success=true){
								//删除成功，要刷新页面，回到首页，每页的页数保持不变
								pageList(1
										,$("#activityPage").bs_pagination('getOption', 'rowsPerPage'));
							}else {
								//删除失败
								alert("删除失败");
							}
						}

					})

				}

			}
		})



		//打开市场活动修改的模态窗口
		$("#editBtn").click(function (){

			//alert("123")
			//打开之前应该先进行市场活动信息查询，填入到响应的位置
			//获取选中的id
			var $xz = $("input[name=xz]:checked");
			//判断修改项
			if ($xz.length==0){
				alert("请选择要修改的市场活动")
			}else if ($xz.length>1){
				alert("只能选择一项要修改的市场活动")
			}else {
				//获取到选中项的id
				var id = $xz.val();

				//发送ajax请求
				$.ajax({
					url : "workbench/activity/getUserListAndActivity.do",
					data : {
						"id":id
					},
					type : "get",
					dataType : "json",
					success : function (data) {
						/*
							data：
								{"userList":userList,"Activity":Activity}
						*/
						var html = "<option></option>";
						//使用each循环遍历user集合，拼接所有者
						$.each(data.userList,function (index,element){
							html += "<option value='"+element.id+"'>"+element.name+"</option>"
						})

						//将拼接的内容设置进去
						$("#edit-owner").html(html);

						//输入其他的内容

						$("#edit-id").val(data.activity.id);
						$("#edit-name").val(data.activity.name);
						$("#edit-owner").val(data.activity.owner);
						$("#edit-startDate").val(data.activity.startDate);
						$("#edit-endDate").val(data.activity.endDate);
						$("#edit-cost").val(data.activity.cost);
						$("#edit-description").val(data.activity.description);

						//展现修改的模态窗口
						$("#editActivityModal").modal("show");

					}


				})

			}
		})


		//为修改按钮绑定鼠标单击事件，进行修改数据
		$("#updateBtn").click(function (){
			//alert(123);
			$.ajax({
				url : "workbench/activity/update.do",
				data : {
					"id" : $.trim($("#edit-id").val()),
					"owner" : $.trim($("#edit-owner").val()),
					"name" : $.trim($("#edit-name").val()),
					"startDate" : $.trim($("#edit-startDate").val()),
					"endDate" : $.trim($("#edit-endDate").val()),
					"cost" : $.trim($("#edit-cost").val()),
					"description" : $.trim($("#edit-description").val())

				},
				type : "post",
				dataType : "json",
				success : function (data) {

					//返回成功或者失败，true表示成功，false表示失败
					if (data.success == true){

						//修改操作之后，刷新市场活动列表，保持当前页，每页页数不变
						pageList($("#activityPage").bs_pagination('getOption', 'currentPage')
								,$("#activityPage").bs_pagination('getOption', 'rowsPerPage'));

						//添加成功后刷新市场活动信息列表，局部刷新
						//关闭添加操作的模态窗口
						$("#editActivityModal").modal("hide");
					}else {
						alert("修改失败")
					}
				}

			})

		})

	});

	//定义刷新市场活动的方法
	function pageList(pageNo,pageSize){
		//每一次刷新，取消全选
		$("#qx").prop("checked",false);

		//每一次刷新都将搜索框中的内容清空
		$("#hidden-name").attr("value","");
		$("#hidden-owner").attr("value","");
		$("#hidden-startDate").attr("value","");
		$("#hidden-endDate").attr("value","");

		//每次出发pageLIst之前，都要将隐藏域中的value值赋给搜索框
		$("#search-name").val($.trim($("#hidden-name").val()));
		$("#search-owner").val($.trim($("#hidden-owner").val()));
		$("#search-startDate").val($.trim($("#hidden-startDate").val()));
		$("#search-endDate").val($.trim($("#hidden-endDate").val()));

		//因为是局部刷新，所以要发送ajax请求
		$.ajax({
			url : "workbench/activity/pageList.do",
			data : {
				"pageNo" : pageNo,
				"pageSize" : pageSize,
				"name" : $.trim($("#search-name").val()),
				"owner" : $.trim($("#search-owner").val()),
				"startDate" : $.trim($("#search-startDate").val()),
				"endDate" : $.trim($("#search-endDate").val())

			},
			type : "get",
			dataType : "json",
			success : function (data) {
				/*
					后台应该返回市场活动的数据和总条数
					总条数：
						{"total" : 100}
					市场活动
						[{市场活动1}，{市场活动2}，....]
					json格式应该是：
						{"total" : 100,"dataList" : [{市场活动1}，[市场活动2]...] }
				 */

				var html = "";

				//遍历data
				$.each(data.dataList,function (index,element){

					//字符串拼接要小心（转义）
					html += '<tr class="active">';
					html += '<td><input type="checkbox" name="xz" value="'+element.id+'"/></td>';//给多选框的value一个唯一的值
					html += '<td><a style="text-decoration: none; cursor: pointer;" onclick="window.location.href=\'workbench/activity/detail.do?id='+element.id+'\';">"'+element.name +'"</a></td>';
					html += '<td>"'+ element.owner +'"</td>';
					html += '<td>"'+ element.startDate +'"</td>';
					html += '<td>"'+ element.endDate +'"</td>';
					html += '</tr>';

				})

				$("#activityBody").html(html);

				//计算总页数
				var totalPages = data.total%pageSize==0?data.total/pageSize:parseInt(data.total/pageSize) + 1;
				//数据处理完毕后,结合分页查询，对前端展现分页信息
				$("#activityPage").bs_pagination({



					currentPage: pageNo, // 页码
					rowsPerPage: pageSize, // 每页显示的记录条数
					maxRowsPerPage: 20, // 每页最多显示的记录条数
					totalPages: totalPages, // 总页数
					totalRows: data.total, // 总记录条数

					visiblePageLinks: 3, // 显示几个卡片

					showGoToPage: true,
					showRowsPerPage: true,
					showRowsInfo: true,
					showRowsDefaultInfo: true,

					//回调函数，点击分页组件的时候出发，再次进行查询
					onChangePage : function(event, data){
						pageList(data.currentPage , data.rowsPerPage);
					}
				});

			}

		})
	}
	
</script>
</head>
<body>

	<input type="hidden" id="hidden-name" />
	<input type="hidden" id="hidden-owner" />
	<input type="hidden" id="hidden-startDate" />
	<input type="hidden" id="hidden-endDate" />

	<!-- 创建市场活动的模态窗口 -->
	<div class="modal fade" id="createActivityModal" role="dialog">
		<div class="modal-dialog" role="document" style="width: 85%;">
			<div class="modal-content">
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal">
						<span aria-hidden="true">×</span>
					</button>
					<h4 class="modal-title" id="myModalLabel1">创建市场活动</h4>
				</div>
				<div class="modal-body">
				
					<form class="form-horizontal" role="form" id="activityAddForm">
					
						<div class="form-group">
							<label for="create-marketActivityOwner" class="col-sm-2 control-label">所有者<span style="font-size: 15px; color: red;">*</span></label>
							<div class="col-sm-10" style="width: 300px;">
								<select class="form-control" id="create-Owner">

								</select>
							</div>
                            <label for="create-marketActivityName" class="col-sm-2 control-label">名称<span style="font-size: 15px; color: red;">*</span></label>
                            <div class="col-sm-10" style="width: 300px;">
                                <input type="text" class="form-control" id="create-name">
                            </div>
						</div>
						
						<div class="form-group">
							<label for="create-startTime" class="col-sm-2 control-label">开始日期</label>
							<div class="col-sm-10" style="width: 300px;">
								<!--calss属性，样式，可以多个，中甲能用空格隔开-->
								<input type="text" class="form-control time" id="create-startDate" >
							</div>
							<label for="create-endTime" class="col-sm-2 control-label">结束日期</label>
							<div class="col-sm-10" style="width: 300px;">
								<input type="text" class="form-control time" id="create-endDate">
							</div>
						</div>
                        <div class="form-group">

                            <label for="create-cost" class="col-sm-2 control-label">成本</label>
                            <div class="col-sm-10" style="width: 300px;">
                                <input type="text" class="form-control" id="create-cost">
                            </div>
                        </div>
						<div class="form-group">
							<label for="create-describe" class="col-sm-2 control-label">描述</label>
							<div class="col-sm-10" style="width: 81%;">
								<textarea class="form-control" rows="3" id="create-description"></textarea>
							</div>
						</div>
						
					</form>
					
				</div>
				<div class="modal-footer">
					<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
					<button type="button" class="btn btn-primary" id="saveBtn">保存</button>
				</div>
			</div>
		</div>
	</div>
	
	<!-- 修改市场活动的模态窗口 -->
	<div class="modal fade" id="editActivityModal" role="dialog">
		<div class="modal-dialog" role="document" style="width: 85%;">
			<div class="modal-content">
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal">
						<span aria-hidden="true">×</span>
					</button>
					<h4 class="modal-title" id="myModalLabel2">修改市场活动</h4>
				</div>
				<div class="modal-body">
				
					<form class="form-horizontal" role="form">

						<input type="hidden" id="edit-id" />

						<div class="form-group">
							<label for="edit-marketActivityOwner" class="col-sm-2 control-label">所有者<span style="font-size: 15px; color: red;">*</span></label>
							<div class="col-sm-10" style="width: 300px;">
								<select class="form-control" id="edit-owner">

								</select>
							</div>
                            <label for="edit-marketActivityName" class="col-sm-2 control-label">名称<span style="font-size: 15px; color: red;">*</span></label>
                            <div class="col-sm-10" style="width: 300px;">
                                <input type="text" class="form-control" id="edit-name" >
                            </div>
						</div>

						<div class="form-group">
							<label for="edit-startTime" class="col-sm-2 control-label">开始日期</label>
							<div class="col-sm-10" style="width: 300px;">
								<input type="text" class="form-control time " id="edit-startDate" >
							</div>
							<label for="edit-endTime" class="col-sm-2 control-label">结束日期</label>
							<div class="col-sm-10" style="width: 300px;">
								<input type="text" class="form-control time" id="edit-endDate" >
							</div>
						</div>
						
						<div class="form-group">
							<label for="edit-cost" class="col-sm-2 control-label">成本</label>
							<div class="col-sm-10" style="width: 300px;">
								<input type="text" class="form-control" id="edit-cost" >
							</div>
						</div>
						
						<div class="form-group">
							<label for="edit-describe" class="col-sm-2 control-label">描述</label>
							<div class="col-sm-10" style="width: 81%;">


								<!--这里对textarea取值和赋值要使用val()-->


								<textarea class="form-control" rows="3" id="edit-description"></textarea>
							</div>
						</div>
						
					</form>
					
				</div>
				<div class="modal-footer">
					<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
					<button type="button" class="btn btn-primary" id="updateBtn">更新</button>
				</div>
			</div>
		</div>
	</div>
	
	
	
	
	<div>
		<div style="position: relative; left: 10px; top: -10px;">
			<div class="page-header">
				<h3>市场活动列表123</h3>
			</div>
		</div>
	</div>
	<div style="position: relative; top: -20px; left: 0px; width: 100%; height: 100%;">
		<div style="width: 100%; position: absolute;top: 5px; left: 10px;">
		
			<div class="btn-toolbar" role="toolbar" style="height: 80px;">
				<form class="form-inline" role="form" style="position: relative;top: 8%; left: 5px;">
				  
				  <div class="form-group">
				    <div class="input-group">
				      <div class="input-group-addon">名称</div>
				      <input class="form-control" type="text" id="search-name">
				    </div>
				  </div>
				  
				  <div class="form-group">
				    <div class="input-group">
				      <div class="input-group-addon">所有者</div>
				      <input class="form-control" type="text" id="search-owner">
				    </div>
				  </div>


				  <div class="form-group">
				    <div class="input-group">
				      <div class="input-group-addon">开始日期</div>
					  <input class="form-control" type="text" id="search-startDate" />
				    </div>
				  </div>
				  <div class="form-group">
				    <div class="input-group">
				      <div class="input-group-addon">结束日期</div>
					  <input class="form-control" type="text" id="search-endDate">
				    </div>
				  </div>
				  
				  <button type="button" id="searchBtn" class="btn btn-default">查询</button>
				  
				</form>
			</div>
			<div class="btn-toolbar" role="toolbar" style="background-color: #F7F7F7; height: 50px; position: relative;top: 5px;">
				<div class="btn-group" style="position: relative; top: 18%;">
					<!--
						data-toggle="modal"	表示触发该按钮，将要打开一个模特窗口

						data-target="#editActivityModal" 表示要打开哪个模态窗口，通过#id的形式

						这样就写死了，不能对按钮功能进行扩充，所以要使用id代替，在js代码中进行绑定事件
					-->
				  <button type="button" class="btn btn-primary" id="addBtn"><span class="glyphicon glyphicon-plus"></span> 创建</button>
				  <button type="button" class="btn btn-default" id="editBtn"><span class="glyphicon glyphicon-pencil"></span> 修改</button>
				  <button type="button" class="btn btn-danger" id="deleteBtn"><span class="glyphicon glyphicon-minus"></span> 删除</button>
				</div>
				
			</div>
			<div style="position: relative;top: 10px;">
				<table class="table table-hover">
					<thead>
						<tr style="color: #B3B3B3;">
							<td><input type="checkbox" id="qx" /></td>
							<td>名称</td>
                            <td>所有者</td>
							<td>开始日期</td>
							<td>结束日期</td>
						</tr>
					</thead>
					<tbody id="activityBody">



                        <tr class="active">
                            <td><input type="checkbox" /></td>
                            <td><a style="text-decoration: none; cursor: pointer;" onclick="window.location.href='detail.jsp';">发传单</a></td>
                            <td>zhangsan</td>
                            <td>2020-10-10</td>
                            <td>2020-10-20</td>
                        </tr>
					</tbody>
				</table>
			</div>
			
			<div style="height: 50px; position: relative;top: 30px;">
				<div id="activityPage"></div>

			</div>
			
		</div>
		
	</div>
</body>
</html>